<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />
        <div class="request-party-service-manage-body">
          <!-- 搜索板块 -->
          <GetPageForm
            ref="GetPageFormRef"
            :form-data="formData"
            :ids="ids"
            :add-but="ADD"
            :delete-button="DEL"
            @getTableData="getTableData"
            @resetBtn="resetBtn"
            @addBtn="addBtn"
          />
          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />

            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <!--      新增-->
          <AddCon ref="AddConRef" @refresh-data="resetBtn" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AddCon from '@/views/contactAlarm/components/addCon.vue'
import GetPageForm from '@/components/GetPageForm/index.vue'
import { listMonitorAlarmUser, getMonitorAlarmUser } from '@/api/contactAlarm'

export default {
  name: 'ContactAlarm',
  components: { AddCon, GetPageForm },
  data () {
    return {
      ADD: 'CONTACTALARM_ADD_BUTTON', // 新增
      DEL: 'CONTACTALARM_DEL_BUTTON', // 删除
      formData: {
        list: [
          {
            model: 'realName',
            type: 'input',
            placeholder: '联系人'
          },
          {
            model: 'phone',
            type: 'input',
            placeholder: '电话'
          },
          {
            model: 'email',
            type: 'input',
            placeholder: '邮箱'
          }
        ],
        MyButton: {
          getTable: true,
          reset: true,
          deleteBtn: true,
          add: true
        },
        deleteAddress: '/interfaceMonitorAlarmUser/delete',
        method: 'post'
      },
      loading: false,
      tableData: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '联系人', prop: 'realName' },
        { label: '电话', prop: 'phone' },
        { label: '邮箱', prop: 'email' },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button vPermission={['CONTACTALARM_DETAIL_BUTTON']} type='text' onClick={() => this.detail(scope.row)}> 详情 </el-button>,
              <el-button vPermission={['CONTACTALARM_UPDATE_BUTTON']} type='text' onClick={() => this.edit(scope.row)}> 编辑 </el-button>,
              <el-button vPermission={['CONTACTALARM_DEL_BUTTON']} type='text' class='text-del-btn' onClick={() => this.delBtn(scope.row)}> 删除 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: null
      },
      ids: []
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    getTableData(form) {
      this.loading = true
      const params = {
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        ...form
      }
      listMonitorAlarmUser(params).then(res => {
        if (res.code === '00000') {
          this.tableData = res.data.rows
          this.pagination.totalPage = res.data.totalRows
          this.loading = false
        }
      })
      console.log(params)
    },
    resetBtn() {
      Object.assign(this.pagination, {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      })
      this.getTableData()
    },
    addBtn() {
      this.$refs.AddConRef.dialogVisible = true
      this.$refs.AddConRef.form = {}
      this.$refs.AddConRef.title = '新增紧急联系人'
    },
    async edit(row) {
      const data = await getMonitorAlarmUser(row.id)
      this.$refs.AddConRef.dialogVisible = true
      this.$refs.AddConRef.title = '修改紧急联系人'
      this.$refs.AddConRef.form = data.data
    },
    async detail(row) {
      const data = await getMonitorAlarmUser(row.id)
      if (data.code === '00000') {
        this.$refs.AddConRef.dialogVisible = true
        this.$refs.AddConRef.f = true
        this.$refs.AddConRef.form = data.data
        this.$refs.AddConRef.title = '查看紧急联系人'
      }
    },
    delBtn(detail) {
      this.ids = [detail.id]
      this.$refs.GetPageFormRef.deleteBtn()
    },
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
  .request-party-service-manage {
    background: #F2F2F2;

    &-body {
      background: #fff;
      margin-top: 10px;
      padding: 20px;
      height: calc(100vh - 254px);
      overflow-y: auto;
    }
    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }

    .el-tree {
      ::v-deep .el-tree-node__expand-icon {
        font-size: 18px;
      }
      .custom-tree-node {
        width: calc(100% - 30px);
        display: flex;
        align-items: center;
        padding-right: 20px;

        > span:first-child {
          display: inline-block;
          width: calc(100% - 50px);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 40px;
        }

        .tree-btn {
          .el-switch {
            margin-top: -4px;
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>

